<template>
	<el-alert title="注册中心树形节点预览, 点击节点名称查看节点数据" type="success" :closable="false" />
	<el-divider />
	<el-tree accordion :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :expand-on-click-node="false" :highlight-current="true"/>
	 <el-dialog
	    v-model="dialogVisible"
	    title="节点信息"
	    width="50%"
	  >
	  <div>{{ nodeInfo }}</div>
	  </el-dialog>
</template>

<script>
import axios from 'axios';
	

export default {
	data() {
		return {
			treeData: [
				{
					label: '/',
					children: [
						{
							label: 'my-rpc',
							children: [
								{
									label: 'cn.kimming.rpc.demo.UserService'
								}
							]
						},
						{
							label: 'zookeeper'
						}
					]
				}
			],
			dialogVisible: false,
			nodeInfo: ''
		}
	},
	methods: {
		handleNodeClick(node, node2, node3) {
			let array = [];
			this.getFullPathArray(node2, array);
			let nodePath = '/' + array.join('/');
			this.dialogVisible = true;
			const vue = this;
			axios.get('/getnodeinfo?nodePath=' + nodePath)
			  .then(function (resp) {
				if (resp.data.success) {
					vue.nodeInfo = resp.data.data;
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  })
		},
		getFullPathArray(node, array) {
			if (node.parent == null || node.parent.parent == null) return;
			array.unshift(node.data.label);
			return this.getFullPathArray(node.parent, array);
		}
	},
	created() {
		const vue = this;
		axios.get('/registrytreedata')
		  .then(function (resp) {
		    // handle success
			if (resp.data.success) {
				let treeData = new Array(resp.data.data);
				vue.treeData = treeData;
			}
		  })
		  .catch(function (error) {
		    // handle error
		    console.log(error);
		  })
		  .then(function () {
		    // always executed
		  });
	}
}
</script>

<style>
</style>
